/** @jsx React.DOM */
var React = require('react');

var PaginationItem = React.createClass({
	render: function() {
		return (
			<li className={this.props.klassName}>
				<a href="#" onClick={this.onItemClick}>
					{this.props.text}
				</a>
			</li>
		);
	},
	onItemClick: function(event) {
		event.preventDefault();
		this.props.onClickFromParent(this.props.text);
		return false;
	}
});

var Pagination = React.createClass({
	transform: function(i) {
		if (typeof i === 'string') {
			return parseInt(i, 10);
		} else {
			return i;
		}
	},
	render: function() {
		var length = this.transform(this.props.length);
		var capacity = this.transform(this.props.capacity);
		capacity += (capacity % 2);
		var index = this.state.index;

		var paginationItems = [];
		for (var i = 1; i <= length; i++) {
			var className = i === index ? 'active' : '';
			if (length <= capacity) {
				paginationItems.push(<PaginationItem text={i} key={i} onClickFromParent={this.onPaginationClick} klassName={className} />);
			} else if (index < 4) {
				if (i <= capacity - 2) {
					paginationItems.push(<PaginationItem text={i} key={i} onClickFromParent={this.onPaginationClick} klassName={className} />);
				}
			} else if (index >= length - (capacity - 3)) {
				if (i >= length - (capacity - 3)) {
					paginationItems.push(<PaginationItem text={i} key={i} onClickFromParent={this.onPaginationClick} klassName={className} />);
				}
			} else if (i >= index && i < index + (capacity - 4)) {
				paginationItems.push(<PaginationItem text={i} key={i} onClickFromParent={this.onPaginationClick} klassName={className} />);
			}
		}

		var one = 1;
		var oneClassName = index === 1 ? 'active' : '';
		var lastClassName = index === length ? 'active' : '';

		var arrowLeft = <PaginationItem text="<" key="arrowLeft" onClickFromParent={this.onPaginationClick} />;
		var arrowRight = <PaginationItem text=">" key="arrowRight" onClickFromParent={this.onPaginationClick} />;

		var first = <PaginationItem text={one} key={one} onClickFromParent={this.onPaginationClick} klassName={oneClassName} />;
		var last = <PaginationItem text={length} key={length} onClickFromParent={this.onPaginationClick} klassName={lastClassName} />;

		if (length > capacity) {
			if (index < 4) {
				paginationItems.push(arrowRight);
				paginationItems.push(last);
			} else if (index >= length - (capacity - 3)) {
				paginationItems.unshift(arrowLeft);
				paginationItems.unshift(first);
			} else {
				paginationItems.unshift(arrowLeft);
				paginationItems.unshift(first);
				paginationItems.push(arrowRight);
				paginationItems.push(last);
			}
		}

		return (
			<ul className="pagination">
				{paginationItems}
			</ul>
		);

	},
	onPaginationClick: function(i) {
		if (i === '>') {
			i = this.state.index + 3;
		} else if (i === '<') {
			i = this.state.index - 3;
		}

		if (i < 1) {
			i = 1;
		}

		var length = this.transform(this.props.length);
		if (i > length) {
			i = length;
		}

		this.setState({index: i});
		this.props.onPage(i);
	},
	getInitialState: function() {
		return {index: 1};
	}
});

module.exports = Pagination;
